<template>
  <a-select
    v-show="show"
    v-decorator="decorator"
    :value="value"
    :placeholder="placeholder"
    style="width: 100%"
    show-search
    first-active-value
    :filter-option="filter"
    @change="$emit('change', $event)"
  >
    <a-select-option v-for="teacher in teacherList" :key="teacher.id" :disabled="disabled(teacher)" :value="teacher[readKey]">{{ teacher.name }}</a-select-option>
  </a-select>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'TeacherSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    value: {
      type: [String, Number, Array, Object, undefined, null],
      default: undefined
    },
    decorator: {
      type: Array,
      default: _ => []
    },
    placeholder: {
      type: String,
      default: '请选择负责人'
    },
    filterFunction: {
      type: Function,
      default: i => function (i) { return i }
    },
    readKey: {
      type: String,
      default: 'userId'
    },
    disabled: {
      type: Function,
      default: () => false
    }
  },

  computed: {
    ...mapState({
      teacherList (state) {
        return state.basic.teacherList.concat().filter(i => i.userId).filter(this.filterFunction)
      }
    })
  },

  methods: {
    filter (v, o) {
      return (
        o.componentOptions.children[0].text.toLowerCase().indexOf(v.toLowerCase()) >= 0
      )
    }
  }
}
</script>
